var column = [
        { text: 'Name', dataIndex: 'name' },
        { text: 'Email', dataIndex: 'email', flex: 1 },
        { text: 'Phone', dataIndex: 'phone' }
    ];

var simpsonsStore =Ext.create('Ext.data.Store', {
    fields:[ 'name', 'email', 'phone'],
    data: [
        { name: 'Lisa', email: 'lisa@simpsons.com', phone: '555-111-1224' },
        { name: 'Bart', email: 'bart@simpsons.com', phone: '555-222-1234' },
        { name: 'Homer', email: 'homer@simpsons.com', phone: '555-222-1244' },
        { name: 'Marge', email: 'marge@simpsons.com', phone: '555-222-1254' }
    ]
});


var routStepData = Ext.create('Ext.data.Store', {
	fields : [ 'name' ],
	data : [ {
		"name" : "step1"
	}, {
		"name" : "step2"
	}, {
		"name" : "step3"
	}, {
		"name" : "step4"
	}, {
		"name" : "step5"
	} ]
});

var chooseData = Ext.create('Ext.data.Store', {
	fields : [ "id","name" ],
	data : [ {
		"id":'2',
		"name" : "yes"
	}, {
		"id":'3',
		"name" : "no"
	} ]
});
var modeData = Ext.create('Ext.data.Store', {
	fields : [ "name" ],
	data : [ {
		"name" : "Q&A"
	}, {
		"name" : "TEXT"
	}, {
		"name" : "CHECKBOX"
	}, {
		"name" : "AUTO"
	} ]
});

var pageData = Ext.create('Ext.data.Store', {
	fields : [ "num" ],
	data : [ {
		"num" : "1"
	}, {
		"num" : "2"
	}, {
		"num" : "3"
	}, {
		"num" : "4"
	}, {
		"num" : "5"
	}, {
		"num" : "6"
	}, {
		"num" : "7"
	}, {
		"num" : "8"
	}, {
		"num" : "9"
	}, {
		"num" : "10"
	}, {
		"num" : "11"
	}, {
		"num" : "12"
	}, {
		"num" : "13"
	}, {
		"num" : "14"
	}, {
		"num" : "15"
	}, {
		"num" : "16"
	}, {
		"num" : "17"
	}, {
		"num" : "18"
	}, {
		"num" : "19"
	}, {
		"num" : "20"
	}, {
		"num" : "21"
	}, {
		"num" : "23"
	}, {
		"num" : "24"
	}, {
		"num" : "25"
	}, {
		"num" : "26"
	}, {
		"num" : "27"
	}, {
		"num" : "28"
	}, {
		"num" : "29"
	}, {
		"num" : "30"
	}, {
		"num" : "31"
	}, {
		"num" : "32"
	}, {
		"num" : "33"
	}, {
		"num" : "34"
	}, {
		"num" : "35"
	}, {
		"num" : "36"
	}, {
		"num" : "37"
	} ]
});

var autoOptData = Ext.create('Ext.data.Store', {
	fields : [ "name" ],
	data : [ {
		"name" : "Autojudgement"
	}, {
		"name" : "AVP"
	} ]
});

var modeSelect = function(combo, records, eOpts) {
	var prompt = Ext.getCmp('prompt');
	var target = Ext.getCmp('target-value');
	var tolerance = Ext.getCmp('tolerance');
	var valueMin = Ext.getCmp('value-min');
	var valueMax = Ext.getCmp('value-max');
	var autoOpt = Ext.getCmp('auto-opt');
	if (combo.value == 'Q&A' || combo.value == 'TEXT') {
		prompt.show();
		target.show();
		valueMin.hide();
		valueMax.hide();
		autoOpt.hide();
	} else if (combo.value == 'CHECKBOX') {
		prompt.show();
		target.hide();
		valueMin.hide();
		valueMax.hide();
		autoOpt.hide();
	} else if(combo.value == 'AUTO') {
		prompt.show();
		target.show();
		valueMin.show();
		valueMax.show();
		autoOpt.show();
	}
}

function stepListFN(){
	var processName = Ext.getCmp('111').value;
	Ext.define('stepListWin',{
		extend:'Ext.window.Window',
		id:'stepListWinId',
		title:'Step List',
		titleAlign:'center',
		width:600,
		modal : true,
		defaults:{
			
		},
		items:[{
			id:'form11',
			xtype:'form',
			width:'100%',
			border:false,
			layout:{
				type: 'column',
		        // columns: 2
			},
			padding : '10',
			defaults : {
				anchor : '100%',
				margin : '4 0 3 16',
				width:260
			},
			items:[ {
				id : 'attr-group',
				xtype : 'combobox',
				fieldLabel : 'Attrbute Group',
				
			}, {
				id : 'step-name',
				xtype : 'textfield',
				fieldLabel : 'Step Name',
				value:processName
				// msgTarget : 'side',
				// allowBlank : false
			}, {
				id : 'mode',
				xtype : 'combobox',
				fieldLabel : 'Mode',
				store : modeData,
				displayField : 'name',
				listeners : {
					select : modeSelect
				}
			}, {
				id : 'prompt',
				xtype : 'textfield',
				fieldLabel : 'Prompt',
				// allowBlank : false,
				// msgTarget : 'side',
				hidden : true
			}, {
				id : 'target-value',
				xtype : 'textfield',
				fieldLabel : 'Target Value',
				listeners:{
					blur:function(te){
						var modeVal = Ext.getCmp("mode").getValue();
						if(modeVal=='AUTO'){
							if(isNaN(this.getValue())){
								Ext.Msg.alert("ERROR","Target Value Must Be A Number In AUTO Mode !")
							}else{
								var tolerance = "2%";
								var s =tolerance.substring(0,1);
								Ext.getCmp('value-min').setValue(this.getValue()*(1-s/100));
							}
						}
						
					}
				},
				// allowBlank : false,
				// msgTarget : 'side',
				hidden : true
			}, {
				id : 'auto-opt',
				xtype : 'combobox',
				fieldLabel : 'Auto Option',
				store : autoOptData,
				hidden : true,
				// allowBlank : false,
				displayField : 'name'
			},{
				id : 'tolerance',
				xtype : 'textfield',
				fieldLabel : 'Tolerance',
				// allowBlank : false,
				// msgTarget : 'side',
				hidden : true
			}, {
				id : 'value-min',
				xtype : 'textfield',
				fieldLabel : 'ValueMin',
				readOnly:true,
				// allowBlank : false,
				// msgTarget : 'side',
				hidden : true
			}, {
				id : 'value-max',
				xtype : 'textfield',
				fieldLabel : 'ValueMax',
				// allowBlank : false,
				// msgTarget : 'side',
				hidden : true
			}/*,{
				xtype:'container',
				colspan: 2,
				defaults : {
					anchor : '100%',
					margin : '0 0 0 16',
					width:50
				},
				layout:{
					type:'hbox'
				},
				items:[{
					margin:'0 0 0 380',
					xtype:'button',
					text:'Save'
				},{
					xtype:'button',
					text:'Reset'
				}]
			}*/],
			buttons:[{
				margin:'0 0 0 380',
				xtype:'button',
				text:'Save',
				handler:function(){
					Ext.getCmp('stepListWinId').getForm().reset();
				}
			},{
				xtype:'button',
				text:'Reset',
				handler:function(){
					Ext.getCmp('form11').getForm().reset();
				}
			}]
		},{
			xtype:'grid',
			store:simpsonsStore,
			columns:column,
			tbar:[{
				text:'edit'
			},'->',{
				text:'StepList'
			}]
		},],
		
		
	});
	var stepListWin = Ext.create('stepListWin');
	stepListWin.showAt(550,230);
	stepListWin.show();
};
function chapterWinFN(){
	var hello = Ext.getCmp('helloGrid').getSelectionModel().getSelection()[0].get('name');
	Ext.define('chapterWin',{
		extend:'Ext.window.Window',
		id:'chapterWinId',
		title:'Chapter',
		titleAlign:'center',
		width:600,
		modal : true,
		defaults:{
			
		},
		items:[{
			xtype:'form',
			width:'100%',
			border:false,
			layout:{
				type: 'table',
		        columns: 2
			},
			padding : '10 8 0 8',
			defaults : {
				anchor : '100%',
				margin : '4 0 3 16',
				width:265,
				labelWidth:90
			},
			items:[{
				xtype:'textfield',
				fieldLabel:'Chapter',
				readOnly :true,
				//value:processName
			},{
				id:'111',
				xtype:'textfield',
				fieldLabel:'SFDC Process',
				value:'Hello'
			},{
				xtype:'datefield',
				fieldLabel:'Start Date'
			},{
				xtype:'datefield',
				fieldLabel:'End Date'
			},{
				xtype:'combo',
				fieldLabel:'Pages',
				store: chooseData,
	    		hidden:false,
                displayField: 'name',
                valueField: 'id',
                queryMode: 'local',
	    		forceSelection: true,
	    		editable: true, 
	            typeAhead: false,
	            enableKeyEvents:true,
	            minChars:4,
	            listeners: {
	    			select: {fn: function() {
	    				var data = this.getModelData( ) ;
	    				alert(this.getValue());
	    			}}
	    		}
			},{
				xtype:'combo',
				fieldLabel:'Show Default'
			},{
				xtype:'container',
				colspan: 2,
				defaults : {
					anchor : '100%',
					margin : '0 0 0 16',
					width:50
				},
				layout:{
					type:'hbox'
				},
				items:[{
					margin:'0 0 0 380',
					xtype:'button',
					text:'Save',
					handler : function(){
						
					}
				},{
					xtype:'button',
					text:'Reset'
				}]
			}]
		},{
			xtype:'grid',
			store:simpsonsStore,
			columns:column,
			tbar:[{
				xtype:'button',
				text:'edit',
				width:50
			},'->',{
				text:'StepList',
				width:50,
				handler:function(){
					stepListFN();
				}
			}]
		}],
		
		
	});
	var chapterWin = Ext.create('chapterWin');

	chapterWin.showAt(350,100);
	chapterWin.show();
};


Ext.onReady(function(){
	Ext.define('gridPanel1',{
		extend:'Ext.grid.Panel',
		id:'helloGrid',
		title:'MyGird',
		width:'100%',
		store:simpsonsStore,
		autoShow:true,
		selModel: {
			selType: 'checkboxmodel',
			mode:'MULTI'
		},
		columns: column,
		tbar:['->',{
			xtype:'button',
			text:'Chapter',
			handler:function(){
				chapterWinFN();
			}	
		}],
		renderTo:Ext.getBody()
	});
	var grid =  Ext.create('gridPanel1');
	grid.show();
});